<template>
  <div>
    <div>
      <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="品牌">
          <el-input
            v-model="searchData.name"
            placeholder="请输入品牌名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="首字母">
          <el-input
            v-model="searchData.firstChar"
            placeholder="请输入品牌首字母"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button type="primary" @click="batchDel()">批量删除</el-button>
      <el-button type="success" @click="add">添加</el-button>&emsp;
      <el-button type="primary" plain @click="allChoose">全选</el-button>
      <el-button type="success" plain @click="noChoose">全不选</el-button>
      <el-button type="info" plain @click="reserveChoose">反选</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="品牌" width="180">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="首字母" width="180">
          <template slot-scope="scope">
            {{ scope.row.firstChar }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="updateData">
          <el-form-item label="品牌" :label-width="formLabelWidth">
            <el-input v-model="updateData.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="首字母" :label-width="formLabelWidth">
            <el-input
              v-model="updateData.firstChar"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updates()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
      >
      </el-pagination>
    </div>
    <div>
      <el-dialog title="添加商品" :visible.sync="dialogFormVisibles">
        <el-form :model="insertData">
          <el-form-item label="品牌" :label-width="formLabelWidth">
            <el-input v-model="insertData.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="首字母" :label-width="formLabelWidth">
            <el-input
              v-model="insertData.firstChar"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibles = false">取 消</el-button>
          <el-button type="primary" @click="inserts()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  brandList,
  updateByid,
  deleteById,
  insertBrand,
  batchDel,
} from "@/api/brand";
export default {
  data() {
    return {
      ids: [],
      dialogFormVisibles: false,
      totals: "",
      currentPage4: 1,
      formLabelWidth: "100px",
      formLabelWidths: "100px",
      dialogFormVisible: false,
      tableData: [],
      updateData: [],
      insertData: {
        name: "",
        firstChar: "",
      },
      searchData: {
        name: "",
        firstChar: "",
        pageNum: "1",
        pageSize: "3",
      },
    };
  },
  created() {
    this.list();
  },
  methods: {
    reserveChoose() {
      this.tableData.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    },
    noChoose() {
      this.tableData.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row, false);
      });
    },
    allChoose() {
      this.tableData.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row, true);
      });
    },
    batchDel() {
      batchDel(this.ids).then((result) => {
        this.list();
      });
    },
    inserts() {
      insertBrand(this.insertData).then((result) => {
        if (result.data.code == 200) {
          this.insertData = { name: "", firstChar: "" };
          this.dialogFormVisibles = false;
        }
      });
    },
    add() {
      this.dialogFormVisibles = true;
    },
    onSubmit() {
      this.list();
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.list();
    },
    updates() {
      updateByid(this.updateData).then((result) => {
        this.dialogFormVisible = false;
      });
    },
    list() {
      brandList(this.searchData).then((result) => {
        this.tableData = result.data.data.list;
        this.totals = result.data.data.total;
      });
      console.log(this.tableData);
    },
    handleEdit(index, row) {
      this.updateData = row;
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      deleteById(row.id).then((result) => {
        this.list();
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.ids = [];
      if (val.length > 0) {
        val.forEach((row) => {
          this.ids.push(row.id);
        });
      } else {
        this.ids = [];
      }
    },
  },
};
</script>
